{% extends "../platformmgr/base.html" %}

{% load admin_utils %}

{% block main_content %}
<div id="application-list" style="width: 100%;" class="p20">
    <div class="mb15 filter-box">
        <div class="paas-search">
            <bk-input
                placeholder="输入应用名称、ID，按 Enter 搜索"
                :clearable="true"
                :right-icon="'bk-icon icon-search'"
                v-model="filterKey"
                @enter="searchApp">
            </bk-input>
        </div>
        <bk-dropdown-menu trigger="click" @show="advancedFilterShow = true" @hide="advancedFilterShow = false" ref="dropdown">
            <div class="advanced-filter" slot="dropdown-trigger">
                <span>高级筛选</span>
                <i :class="['bk-icon icon-angle-down',{'icon-flip': advancedFilterShow}]"></i>
            </div>
            <div slot="dropdown-content" style="width: 240px;" class="ml10">
                <bk-checkbox
                    :true-value="true"
                    :false-value="false"
                    v-model="advancedFilterForm.include_inactive"
                    @change="searchApp">
                    是否显示已下架应用
                </bk-checkbox>
                <bk-radio-group v-model="advancedFilterForm.market_enabled" @change="searchApp">
                    应用市场状态过滤:
                    <bk-radio :value="''" ext-cls="unset-visibility">
                        <i class="bk-icon mr5"></i>不过滤
                    </bk-radio>
                    <bk-radio :value="true" ext-cls="unset-visibility">
                        <i class="bk-icon mr5"></i>开启
                    </bk-radio>
                    <bk-radio :value="false" ext-cls="unset-visibility">
                        <i class="bk-icon mr5"></i>未开启
                    </bk-radio>
                </bk-radio-group>
            </div>
        </bk-dropdown-menu>

    </div>
    <bk-table
        :data="data"
        :cell-class-name="cellStyleCallback"
        >
        <bk-table-column width="45" align="center">
            <template slot-scope="props">
                <img :src="props.row.logo_url" width="30"/>
            </template>
        </bk-table-column>
        <bk-table-column label="应用id">
            <template slot-scope="props">
                <a class="cell" :href="AppDetailUrl(props.row.code)">$[props.row.code] </a>
            </template>
        </bk-table-column>
        <bk-table-column label="应用名称" prop="name"></bk-table-column>
        <bk-table-column label="版本" prop="region"></bk-table-column>
        <bk-table-column label="资源配额" prop="resource_quotas">
            <template slot-scope="props">
                <span>$[props.row.resource_quotas.memory]G / $[props.row.resource_quotas.cpu]核</span>
            </template>
        </bk-table-column>
        <bk-table-column label="应用类型" prop="app_type"></bk-table-column>
        <bk-table-column label="创建时间" prop="created">
            <template slot-scope="props">
                <span v-bk-tooltips="{content: props.row.created }">$[props.row.created_humanized] </span>
            </template>
        </bk-table-column>
        <bk-table-column label="创建人" prop="owner"></bk-table-column>
    </bk-table>
    <pagination
        class="mt15"
        :current.sync="pagination.curPage"
        :limit="pagination.limit"
        :count="pagination.count"
        :align="'right'"
    />
</div>

{% endblock %}

{% block main_script %}
<script>
const pagination = {{ pagination | to_json }}
const data = {{ application_list | to_json }}
const SEARCH_PARAM = "search_term"

document.addEventListener('DOMContentLoaded', () => {
    new Vue({
        el: "#application-list",
        delimiters: ['$[', ']'],
        data: function () {
            let prefix = window.location.href
            let include_inactive = false
            let market_enabled = undefined
            let filterKey = undefined

            if (prefix.indexOf("?") > 0) {
                let query = querystring.parse(prefix.substr(prefix.indexOf("?") + 1))
                filterKey = query[SEARCH_PARAM]
                include_inactive = query.include_inactive === 'true'? true: false
                if (query.market_enabled !== '') {
                    market_enabled = query.market_enabled === 'true'? true: false
                }
            }
            return {
                data,
                pagination,
                baseUrl: '{% url "admin.applications.detail.overview" "--placeholder--" %}',
                SEARCH_PARAM,
                filterKey,
                advancedFilterForm: {
                    include_inactive,
                    market_enabled,
                },
                advancedFilterShow: false
            }
        },
        methods: {
            AppDetailUrl(code) {
                return this.baseUrl.replace("--placeholder--", code)
            },
            searchApp() {
                let query = {
                    [this.SEARCH_PARAM]: this.filterKey, offset:0, include_inactive: this.advancedFilterForm.include_inactive,
                    market_enabled: this.advancedFilterForm.market_enabled
                }
                let prefix = window.location.href

                if (prefix.indexOf("?") > 0) {
                    query = {...querystring.parse(prefix.substr(prefix.indexOf("?") + 1)), ...query}
                    prefix = prefix.substr(0, prefix.indexOf("?"))
                }
                query = querystring.stringify(query)
                window.location.href = `${prefix}?${query}`
            },
            cellStyleCallback: function ({row, column, rowIndex, columnIndex}) {
                if (["已申请资源配额"].indexOf(column.label) !== -1)
                    return 'json-view'
            },
        },
    })
})

</script>

<style>
    .filter-box{
        justify-content: flex-start;
        display: flex;
        align-items:center;
    }
    .paas-search {
        width: 400px;
    }
    .advanced-filter {
        width: 98px;
        height: 32px;
        line-height: 30px;
        border: 1px solid #c4c6cc;
        border-radius: 0 2px 2px 0;
        background: #fff;
        cursor: pointer;
        text-align: center;
    }
    .advanced-filter:hover{
        color: #3a84ff;
    }

    .unset-visibility input[type=radio]{
        visibility: unset;
    }
</style>

{% endblock %}
